<template>
<div>
  <template v-if="info.showFlag==1||info.type === 0">
    <div class="custom-element-wrapper">
      <div class="daka-msg" v-if="info.type === 10" :class="{'isMine':isMine}">
        <div class="daka-title" v-if="info.nutrdaka">营养<br/>打卡</div>
        <div class="daka-title" v-else>{{info.desc.clockItem | fildaka}}</div>
        <div class="daka-con">
          <div class="type01" v-if="!info.nutrdaka">{{info.desc | fildakadesc}}</div>
          <div class="type02 type03" v-else-if="info.desc.length>=1">
            <div class="img-div">
              <img :src="item" v-for="item in info.imgList" :key="item" />
            </div>
            <div class="text-03">
              <h5>{{info.desc[0].clockItem}}
              </h5>
              <p>{{info.desc[0].clockResult}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="quote-content"  v-else-if="info.type == 12">
         {{info.content}}
      </div>
       <div class="question-msg"  v-else-if="info.type == 4" @click="questionFun(info.url)">
        <img :src="info.shareImg">{{info.title}}
      </div>
      <div v-else-if="info.type == 1" class="col" @click="questionLook(info.url)">
           {{info.title}}
      </div>
      <!-- <span v-else-if="info.type === 0" v-html="info.content"></span>
      <span class="text" title="您可以自行解析自定义消息" v-else>{{text}}</span> -->

      <!-- <iframe src="https://hitest.miaocloud.net/evaluation/index?profileId=935079598&appId=313201&qn_id=3132010034002&channelId=d,1,935707026" frameborder="0"></iframe> -->
     
     <div class="healcoin-dialog"  v-if="questionFlag">
      <div>
         <img src="@/assets/image/bg_modal_close.png" class="dialog-close" @click="questionFlag=false" />
          <iframe class="iframe-content" :src="questionUrl" frameborder="0" ></iframe>
      </div>
    </div>


    </div>
  </template>
</div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import { ACTION } from '../../../utils/trtcCustomMessageMap'
import { formatDuration } from '../../../utils/formatDuration'

export default {
  name: 'CustomElement',
  data() {
    return {
      info: {},
      questionFlag: false,
      questionUrl: '',

      showjudge: false,
      showuserfiles: false
    }
  },
  props: {
    payload: {
      type: Object,
      required: true
    },
    message: {
      type: Object,
      required: true
    },
    isMine: {
      type: Boolean
    }
  },
  watch: {
    payload(next) {
    },
  },
  created() {
    var self = this
    try{
      //兼容客户端艾特用户
      var _data = self.payload.data || self.payload.Data;
      var djson =JSON.parse(_data)
      if(!djson.type&&djson.type!==0){
        djson.type=0;
        if(!djson.info){
          djson.info=[]
        }
        for(var i=0;i<djson.info.length;i++){
          if(djson.info[i].identity == self.userID&&!self.isMine){
            var nickname = '@'+djson.info[i].nickname
            var reg = new RegExp(nickname, "g"); 
            djson.content=djson.content.replace(reg, "<span class='at-color'>"+nickname+"</span>")
          }
        }
      }
      if(djson.type==10){
        djson.desc=JSON.parse(djson.desc)
        if(!djson.desc.clockResult){
          djson.desc.clockResult=djson.desc.clockClass
        }
        if(Array.isArray(djson.desc)){
          djson.nutrdaka = true
        }else{
          if(djson.desc.clockType=='营养'){
            djson.desc = [djson.desc]
            djson.nutrdaka = true
          }else{
            djson.nutrdaka = false
          }
        }
      }

     //引用使用
      if(djson.type == 12){
        djson.showFlag = 1
      }

      self.info = djson
    }catch(e){
      self.info = {type: 0,content: '自定义消息格式不正确'}
    }
  },
  computed: {
    ...mapState({
      userID: state => state.user.userID,
      currentConversation: state => state.conversation.currentConversation
    }),
    text() {
      return this.translateCustomMessage(this.payload)
    },
    rate() {
      return parseInt(this.payload.description)
    }
  },
  methods: {
    // 查看文件
    questionLook(url){
      if(!url){
         this.$toast('问卷地址不存在')
         return;
      }
      this.questionFun(url);

    },
    questionFun(url){
      this.questionFlag = true;
      this.questionUrl = url;

    },
    fnGetuserRemark(){
      var self = this
    },
    translateCustomMessage(payload) {
      let videoPayload = {}
      try{
        videoPayload = JSON.parse(payload.data)
      } catch(e) {
        videoPayload = {}
      }
      if (payload.data === 'group_create') {
        return `${payload.extension}`
      }
      switch (videoPayload.action) {
        case ACTION.VIDEO_CALL_ACTION_DIALING:
          return '[请求通话]'
        case ACTION.VIDEO_CALL_ACTION_SPONSOR_CANCEL:
          return '[取消通话]'
        case ACTION.VIDEO_CALL_ACTION_REJECT:
          return '[拒绝通话]'
        case ACTION.VIDEO_CALL_ACTION_SPONSOR_TIMEOUT:
          return '[无应答]'
        case ACTION.VIDEO_CALL_ACTION_ACCEPTED:
          return '[开始通话]'
        case ACTION.VIDEO_CALL_ACTION_HANGUP:
          return `[结束通话，通话时长：${formatDuration(videoPayload.duration)}]`
        case ACTION.VIDEO_CALL_ACTION_LINE_BUSY:
          return '[正在通话中]'
        case ACTION.VIDEO_CALL_ACTION_ERROR:
          return '[设备异常]'
        default:
          return '[自定义消息]'
      }
    }
  },
  filters: {
    fildaka: function(data){
      if(data=='今日心情'){
        return '心情'
      }else if(data.length>2){
        return data.substr(0,2)+'\n'+data.substr(2)
      }else{
        return data
      }
    },
    fildakadesc: function(data){
      if(data.clockType=='药物'){
        if(data.clockResult=='是'){
          return '今日已用药'
        }else{
          return '今日未用药'
        }
      }else if(data.clockType=='心情'){
        if(data.clockResult=='1'){
          return '今日心情很好'
        }else if(data.clockResult=='2'){
          return '今日心情好'
        }else if(data.clockResult=='3'){
          return '今日心情一般'
        }else if(data.clockResult=='4'){
          return '今日心情很差'
        }else{
          return '今日心情很好'
        }
      }else if(data.clockType=='作息'){
        return data.clockItem+'时间：'+data.clockResult
      }else if(data.clockType=='运动'){
        var strdata = data.clockResult
        if(strdata.indexOf('|')>=0){
          strdata=strdata.replace('|','：')
        }
        return strdata
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.col{
    color: #877FFE;
}
.iframe-content{
  width 100%
  height 100%
  border-radius 8px;
}
.healcoin-dialog{
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  display: block;
  background: rgba(0, 0, 0, 0.5);
  &>div{
    position: absolute;
    width 90%;
    height 80%;
    text-align: center;
  
    background: white;
    border-radius: .213333rem;
    margin 20px;
    box-sizing border-box;
  
     
    .dialog-close{
      width: .933333rem;
      height: .933333rem;
      position: absolute;
      top: -0.4rem;
      right: -9px;
      background: #666;
      border-radius: 50%;
    }
    &>button{
      border: none;
      outline: none;
      width: 3.293333rem;
      height: 1.093333rem;
      position: absolute;
      bottom: -1.813333rem;
      left: 50%;
      margin-left: -1.546667rem;
      background: #877FFE;
      border-radius: .546667rem;
      color: white;
      font-size: .48rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}


.quote-content
  color #877FFE
.question-msg
  img
    width 60px
    height 60px
    border-radius 8px
    margin-right 10px
    vertical-align middle

/deep/ .at-color
  color $acolor
.text
  font-weight bold
.title
  font-size 16px
  font-weight 600
  padding-bottom 10px
.survey
  background-color white
  color black
  padding 20px
  display flex
  flex-direction column
.suggestion
  padding-top 10px
  font-size 14px
.daka-msg
  width 351px
  padding 8px 10px 8px 84px
  position relative
  *
    box-sizing border-box
  .daka-title
    position absolute 
    top 8px
    left 10px
    height 48px
    width 53px
    border-right solid 1px #c5c5c5
    display flex
    align-items center
    color #535353
  .daka-con
    min-height 48px
    width 100%
    position relative
    .type01
      font-size 16px
      color #3d3d3d
      line-height 48px
      width 100%
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
    .type02
      padding-left 64px
      &>img 
        position absolute 
        left 0
        top 0
        width 48px
        height 48px
        border-radius 4px
      .text-02
        height 48px
        width 100%
        line-height 24px
        font-size 16px
        color #3d3d3d
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      .text-03
        min-height 48px
        width 100%
        h5,p
          margin 0
          width 100%
          line-height 24px
          font-size 16px
          color #3d3d3d
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          line-clamp: 1;
          -webkit-box-orient: vertical;
    .type03
      padding-left 20px
      .img-div
        min-height 48px
        margin-bottom 19px
        margin-top -10px
        overflow hidden
        img 
          float left 
          width 48px
          height 48px
          border-radius 4px
          margin-right 24px
          margin-top 10px
      .text-03
        h5
          font-weight normal
        p
          margin-top 5px
          color #9B9B9B
          -webkit-line-clamp: 2;
          line-clamp: 3;
  &.isMine
    .daka-title
      color white
    .daka-con
      .type01
        color white
      .type02
        .text-02
          color white
        .text-03
          *
            color white
      .type03
        .text-03
          *
            color white
.ai-msg
  padding 10px
  width 430px
  // transform: scale(0.7);
  *
    box-sizing border-box
  .ai-title
    line-height 28px
    font-size 20px
    color #535353
    margin-bottom 2px
    &.title-isMine
      color white
  ul
    margin 0
    padding 0
    list-style-type none
    width 100%
    overflow hidden
    li
      width 100%
      margin-top 21px
      float left 
      padding 0
      // padding-right 0
      // padding-left 10px
      // &.li-left
      //   padding-right 10px
      //   padding-left 0
      &>div 
        padding 10px
        // heght 46px
        line-height 24px
        text-align center
        border-radius 10.8px
        border solid 1px #8581fe
        color #8581fe
        font-size 18px
        // text-overflow ellipsis
        // overflow hidden
        // white-space nowrap
        &.div-isMine
          color white
          border solid 1px white
.ques-msg
  padding-left: 70px
  min-height: 62px;
  position: relative
  display flex
  align-items center
  cursor pointer
  img 
    width 62px;
    height 62px;
    border-radius 4px
    position: absolute
    left: 0
    top: 0
.group-tip-element-wrapper
  background $white
  padding 4px 15px
  border-radius 3px
  color $secondary
  font-size 12px
  // text-shadow $secondary 0 0 0.05em
  .edit-button
    font-size 12px
    padding-top 4px
    height 20px
    color $acolor
</style>
